<style>
	.content-box {
		position: relative;
		width: 600px;
		height: 600px;
		background-color: rgb(242, 244, 244);
		border: 1px dashed #333;
		background-size: 100% 100%;
		box-sizing: border-box;
	}

	.box {
		width: 100px;
		height: 100px;
		background-color: rgba(255, 255, 255, 0.7);
		border: 1px solid #ccc;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.box1, .box2, .box3, .box4 {
		width: 10px;
		height: 10px;
		background-color: #fff;
		position: absolute;
		border-radius: 50%;
		border: 1px solid #333;
	}

	.box1 {
		top: -5px;
		left: -5px;
		cursor: nw-resize;
	}

	.box2 {
		top: -5px;
		right: -5px;
		cursor: ne-resize;
	}

	.box3 {
		left: -5px;
		bottom: -5px;
		cursor: sw-resize;
	}

	.box4 {
		bottom: -5px;
		right: -5px;
		cursor: se-resize;
	}

	.heat-map-wrap {
		display: flex;
		align-items: flex-start;
		width: 900px;
		margin: 0 auto;
		padding: 30px;
	}

	.heat-map-wrap .area-box {
		width: 100px;
		height: 100px;
		position: absolute;
		top: 0;
		left: 0;
		user-select: none;
		cursor: move;
		border: 1px solid #ccc;
		padding: 5px;
		box-sizing: border-box;
	}

	.heat-map-wrap .manage-wrap {
		padding-left: 20px;
	}

	.heat-map-wrap .manage-wrap h3 {
		margin-bottom: 10px;
		font-size: 16px;
	}

	.heat-map-wrap .manage-wrap button {
		margin-bottom: 10px;
	}

	.heat-map-wrap .manage-wrap .list-wrap {
		overflow-y: auto;
		height: 500px;
	}

	.heat-map-wrap .manage-wrap .list-wrap .item {
		margin-bottom: 16px;
		display: flex;
	}

	.heat-map-wrap .manage-wrap .list-wrap .item label {
		width: 80px;
		padding-right: 10px;
		text-align: right;
	}

	.heat-map-wrap .manage-wrap .list-wrap .item div span {
		cursor: pointer;
	}

	.heat-map-wrap .manage-wrap .list-wrap .item div i {
		cursor: pointer;
		margin: 0 10px;
	}
</style>

<div class="layui-form heat-map-wrap">
    <div class="content-box" id="content_box"><!-- 热区列表 --></div>
    <div class="manage-wrap">
        <h3>热区管理</h3>
        <button class="layui-btn" id="addArea">添加热区</button>
        <div class="list-wrap"><!-- 热区列表 --></div>
    </div>
</div>

<script type="text/html" id="dragBoxHtml">
    {{# for(let i=0;i<d.length;i++){ }}
    <div id="box_{{ i }}" class="area-box" style="left:{{ d[i].left }}{{ d[i].unit }};top:{{ d[i].top }}{{ d[i].unit }};width:{{ d[i].width }}{{ d[i].unit }};height:{{ d[i].height }}{{ d[i].unit }}" onmousedown="mouseDown(event,{{ i }})">
        <span>{{ i + 1 }}</span>
        {{# if(d[i].link.title){ }}
            <span class="p-[4px]">|</span>
            <span>{{ d[i].link.title }}</span>
        {{# } }}
        <span class="box1" onmousedown="resizeMouseDown(event,{{ i }})"></span>
        <span class="box2" onmousedown="resizeMouseDown(event,{{ i }})"></span>
        <span class="box3" onmousedown="resizeMouseDown(event,{{ i }})"></span>
        <span class="box4" onmousedown="resizeMouseDown(event,{{ i }})"></span>
    </div>
    {{# } }}
</script>
<script type="text/html" id="manageHotAreaHtml">
    {{# for(let i=0;i<d.length;i++){ }}
        <div class="item">
            <label>热区{{ i+1 }}：</label>
            <div>
                {{# if(d[i].link.title){ }}
                <span data-index="{{i}}" class="text-color">{{ d[i].link.title }}</span>
                {{# }else{ }}
                <span data-index="{{i}}">选择跳转链接</span>
                {{# } }}
                <i class="icondiy icon-system-delete-bin-6-line" onclick="deleteHotArea({{i}})"></i>
            </div>
        </div>
    {{# } }}
</script>
<script>
    // 热区设置数据
    var imageData = JSON.parse(sessionStorage.getItem('imageData'));
    var dragBoxArr = [];
    var contentBoxWidth = 600;
    var contentBoxHeight = 600;
    var num = 6;// 每行显示的数量
    var laytpl,form,layer;

    layui.use(['form','layer','laytpl'], function() {
        layer = layui.layer;
        laytpl = layui.laytpl;
        form = layui.form;
        form.render();

        if (imageData == null) return;

        if (Object.keys(imageData.heatMapData).length) {
            dragBoxArr.splice(0, dragBoxArr.length, ...imageData.heatMapData);
        } else {
            dragBoxArr.splice(0, dragBoxArr.length);
            $("#addArea").click();
        }

        $("#content_box").css({
            backgroundImage: "url(" + ns.img(imageData.imageUrl) + ")",
            width: contentBoxWidth + 'px',
            height: contentBoxHeight + 'px'
        });
        renderDragBox();
    });

    // 增加热区
    $("#addArea").click(function() {
        let left = dragBoxArr.length % num * 100;
        let top = Math.floor(dragBoxArr.length / num) * 100;
        if (top >= contentBoxWidth) {
            top = 0;
            left = 0;
        }

        dragBoxArr.push({
            left: left,
            top: top,
            width: 100,
            height: 100,
            unit: 'px',
            link: {
                name: ''
            }
        });
        renderDragBox();

    });

    // 渲染热区
    function renderDragBox() {
        laytpl($('#dragBoxHtml').html()).render(dragBoxArr,function(html){
            $('#content_box').html(html);
        });

        laytpl($('#manageHotAreaHtml').html()).render(dragBoxArr,function(html){
            $('.heat-map-wrap .manage-wrap .list-wrap').html(html);
        });
    }

    // 选择跳转链接
    $('body').off('click','.heat-map-wrap .manage-wrap .list-wrap .item div span').on('click','.heat-map-wrap .manage-wrap .list-wrap .item div span',function () {
        let index = $(this).attr('data-index');
        dragBoxArr[index].link = dragBoxArr[index].link || {};
        ns.select_link(dragBoxArr[index].link, function (data) {
            dragBoxArr[index].link = data;
            renderDragBox();
        });
    });

    // 删除热区
    function deleteHotArea(index) {
        dragBoxArr.splice(index,1);
        renderDragBox();
    }

    // 移动事件
    function mouseDown(e, index) {
        let box = document.getElementById('box_' + index);
        let disX = e.clientX - box.offsetLeft;
        let disY = e.clientY - box.offsetTop;

        //鼠标移动时
        document.onmousemove = function (e) {
            box.style.left = e.clientX - disX + 'px';
            box.style.top = e.clientY - disY + 'px';

            //边界判断
            if (e.clientX - disX < 0) {
                box.style.left = 0;
            }

            if (e.clientX - disX > contentBoxWidth - box.offsetWidth) {
                box.style.left = contentBoxWidth - box.offsetWidth + 'px';
            }

            if (e.clientY - disY < 0) {
                box.style.top = 0;
            }

            if (e.clientY - disY > contentBoxHeight - box.offsetHeight) {
                box.style.top = contentBoxHeight - box.offsetHeight + 'px';
            }

            dragBoxArr[index].left = box.offsetLeft;
            dragBoxArr[index].top = box.offsetTop;
            dragBoxArr[index].width = box.offsetWidth;
            dragBoxArr[index].height = box.offsetHeight;
            dragBoxArr[index].unit = 'px';

        };

        //鼠标抬起时
        document.onmouseup = function (e) {
            document.onmousemove = null;
        }
    }

    // 拖拽大小事件
    function resizeMouseDown(e,index) {
        var oEv = e;
        oEv.stopPropagation();
        let box = document.getElementById('box_' + index);
        let className = e.target.className;

        // 获取移动前盒子的宽高，
        var oldWidth = box.offsetWidth;
        var oldHeight = box.offsetHeight;

        // 获取鼠标距离屏幕的left和top值
        var oldX = oEv.clientX;
        var oldY = oEv.clientY;

        // 元素相对于最近的父级定位
        var oldLeft = box.offsetLeft;
        var oldTop = box.offsetTop;

        // 设置最小的宽度
        var minWidth = 50;
        var minHeight = 50;

        document.onmousemove = function (e) {
            var oEv = e;
            // console.log('move', "width：" + oldWidth,
            //     '，oldLeft: ' + oldLeft, '，oldTop: ' + oldTop,
            //     '，oldX：clientX-- ' + oldX + '：' + oEv.clientX,
            //     '，oldY：clientY-- ' + oldY + '：' + oEv.clientY,
            // )

            // 左上角
            if (className == "box1") {

                let width = oldWidth - (oEv.clientX - oldX);
                let maxWidth = contentBoxWidth;

                let height = oldHeight - (oEv.clientY - oldY);
                let maxHeight = contentBoxHeight - oldTop;

                let left = oldLeft + (oEv.clientX - oldX);
                let top = oldTop + (oEv.clientY - oldY);

                if (width < minWidth) {
                    width = minWidth
                }
                if (width > maxWidth) {
                    width = maxWidth
                }

                if (height < minHeight) {
                    height = minHeight
                }
                if (height > maxHeight) {
                    height = maxHeight
                }

                if (oldLeft == 0 && oldTop == 0) {
                    // 坐标：left = 0，top = 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，left = 最小宽度，top = 最小高度
                        left = minWidth;
                        top = minHeight

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，left = 最小宽度，top = 不予处理
                        left = minWidth;

                    } else if (width > minWidth && height == minHeight) {

                        // 宽 > 最小值，高 = 最小值，left = 不予处理，top = 最小高度
                        top = minHeight

                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，left = 不予处理，top = 不予处理
                    }

                } else if (oldLeft == 0 && oldTop > 0) {

                    // 坐标：left = 0，top > 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，left = 最小宽度，top = 元素上偏移位置
                        left = minWidth;
                        top = box.offsetTop

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，left = 最小宽度，top = 元素上偏移位置
                        left = minWidth;
                        top = box.offsetTop;

                    } else if (width > minWidth && height == minHeight) {

                        // 宽 > 最小值，高 = 最小值，left = 不予处理，top = 元素上偏移位置
                        top = box.offsetTop;

                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，left = 不予处理，top = 不予处理
                    }

                } else if (oldLeft > 0 && oldTop == 0) {

                    // 坐标：left > 0，top = 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，left = 元素左偏移位置，top = 元素上偏移位置
                        left = box.offsetLeft;
                        top = box.offsetTop;

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，left = 元素左偏移位置，top = 0
                        left = box.offsetLeft;
                        top = 0;

                    } else if (width > minWidth && height == minHeight) {

                        // 宽 > 最小值，高 = 最小值，left = 不予处理，top = 元素上偏移位置
                        top = box.offsetTop;

                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，left = 不予处理，top = 不予处理
                    }

                } else if (oldLeft > 0 && oldTop > 0) {

                    // 坐标：left > 0，top > 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，left = 元素左偏移位置，top = 元素上偏移位置
                        left = box.offsetLeft;
                        top = box.offsetTop

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，left = 元素左偏移位置，top = 元素上偏移位置
                        left = box.offsetLeft;
                        top = box.offsetTop;

                    } else if (width > minWidth && height == minHeight) {

                        // 宽 > 最小值，高 = 最小值，left = 不予处理，top = 元素上偏移位置
                        top = box.offsetTop;

                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，left = 不予处理，top = 不予处理
                    }

                }

                //左上 宽
                if (left < 0) {
                    left = 0;
                    width = oldWidth - (oEv.clientX - oldX) + (oldLeft + (oEv.clientX - oldX));
                }

                //左上  高
                if (top < 0) {
                    top = 0;
                    height = oldTop + (oEv.clientY - oldY) + (oldHeight - (oEv.clientY - oldY));
                }

                box.style.width = width + 'px';
                box.style.height = height + 'px';
                box.style.left = left + 'px';
                box.style.top = top + 'px';

            } else if (className == "box2") {
                // 右上角

                let width = oldWidth + (oEv.clientX - oldX);
                let maxWidth = contentBoxWidth - oldLeft;

                let height = oldHeight - (oEv.clientY - oldY);
                let maxHeight = contentBoxHeight - oldTop;

                let top = oldTop + (oEv.clientY - oldY);

                if (width < minWidth) {
                    width = minWidth
                }
                if (width > maxWidth) {
                    width = maxWidth
                }

                if (height < minHeight) {
                    height = minHeight
                }
                if (height > maxHeight) {
                    height = maxHeight
                }

                if (oldLeft == 0 && oldTop == 0) {

                    // 坐标：left = 0，top = 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，top = 最小高度
                        top = minHeight

                    } else if (width == minWidth && height > minHeight) {
                        // 宽 = 最小值，高 > 最小值，不予处理
                    } else if (width > minWidth && height == minHeight) {

                        // 宽 > 最小值，高 = 最小值，top = 最小高度
                        top = minHeight

                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，不予处理
                    }

                } else if (oldLeft == 0 && oldTop > 0) {

                    // 坐标：left = 0，top > 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，top = 元素上偏移位置
                        top = box.offsetTop

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，top = 元素上偏移位置
                        top = box.offsetTop

                    } else if (width > minWidth && height == minHeight) {

                        // 宽 > 最小值，高 = 最小值，top = 元素上偏移位置
                        top = box.offsetTop

                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，不予处理
                    }

                } else if (oldLeft > 0 && oldTop == 0) {

                    // 坐标：left = 0，top = 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，top = 元素上偏移位置
                        top = box.offsetTop

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，top = 0
                        top = 0

                    } else if (width > minWidth && height == minHeight) {

                        // 宽 > 最小值，高 = 最小值，top = 元素上偏移位置
                        top = box.offsetTop

                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，不予处理
                    }

                } else if (oldLeft > 0 && oldTop > 0) {

                    // 坐标：left > 0，top > 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，top = 元素上偏移位置
                        top = box.offsetTop

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，top = 元素上偏移位置
                        top = box.offsetTop

                    } else if (width > minWidth && height == minHeight) {

                        // 宽 > 最小值，高 = 最小值，top = 元素上偏移位置
                        top = box.offsetTop

                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，不予处理
                    }

                }

                //右上  高
                if (top < 0) {
                    top = 0;
                    height = oldTop + (oEv.clientY - oldY) + (oldHeight - (oEv.clientY - oldY))
                }

                box.style.width = width + 'px';
                box.style.height = height + 'px';
                box.style.top = top + 'px';

            } else if (className == "box3") {
                // 左下角

                let width = oldWidth - (oEv.clientX - oldX);
                let maxWidth = contentBoxWidth;

                let height = oldHeight + (oEv.clientY - oldY);
                let maxHeight = contentBoxHeight - oldTop;

                let left = oldLeft + (oEv.clientX - oldX);

                if (width < minWidth) {
                    width = minWidth
                }
                if (width > maxWidth) {
                    width = maxWidth
                }

                if (height < minHeight) {
                    height = minHeight
                }
                if (height > maxHeight) {
                    height = maxHeight
                }

                if (oldLeft == 0 && oldTop == 0) {
                    // 坐标：left = 0，top = 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，left = 最小宽度
                        left = minWidth;

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，left = 最小宽度
                        left = minWidth;

                    } else if (width > minWidth && height == minHeight) {
                        // 宽 > 最小值，高 = 最小值，不予处理
                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，不予处理
                    }

                } else if (oldLeft == 0 && oldTop > 0) {

                    // 坐标：left = 0，top > 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，left = 最小宽度
                        left = minWidth;

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，left = 最小宽度
                        left = minWidth;

                    } else if (width > minWidth && height == minHeight) {
                        // 宽 > 最小值，高 = 最小值，不予处理
                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，不予处理
                    }

                } else if (oldLeft > 0 && oldTop == 0) {

                    // 坐标：left > 0，top = 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，left = 元素左偏移位置
                        left = box.offsetLeft;

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，left = 元素左偏移位置
                        left = box.offsetLeft;

                    } else if (width > minWidth && height == minHeight) {
                        // 宽 > 最小值，高 = 最小值，不予处理
                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，不予处理
                    }

                } else if (oldLeft > 0 && oldTop > 0) {

                    // 坐标：left > 0，top > 0

                    if (width == minWidth && height == minHeight) {

                        // 宽高 = 最小值，left = 元素左偏移位置
                        left = box.offsetLeft;

                    } else if (width == minWidth && height > minHeight) {

                        // 宽 = 最小值，高 > 最小值，left = 元素左偏移位置
                        left = box.offsetLeft;

                    } else if (width > minWidth && height == minHeight) {
                        // 宽 > 最小值，高 = 最小值，不予处理
                    } else if (width > minWidth && height > minHeight) {
                        // 宽 > 最小值，高 > 最小值，不予处理
                    }

                }

                if (left < 0) {
                    left = 0;
                    width = oldWidth - (oEv.clientX - oldX) + (oldLeft + (oEv.clientX - oldX));
                }

                box.style.width = width + 'px';
                box.style.height = height + 'px';
                box.style.left = left + 'px';

            } else if (className == "box4") {
                // 右下角

                let width = oldWidth + (oEv.clientX - oldX);
                let maxWidth = contentBoxWidth - oldLeft;

                let height = oldHeight + (oEv.clientY - oldY);
                let maxHeight = contentBoxHeight - oldTop;

                if (width < minWidth) {
                    width = minWidth
                }
                if (width > maxWidth) {
                    width = maxWidth
                }

                if (height < minHeight) {
                    height = minHeight
                }
                if (height > maxHeight) {
                    height = maxHeight
                }

                box.style.width = width + 'px';
                box.style.height = height + 'px';
            }

            dragBoxArr[index].left = box.offsetLeft;
            dragBoxArr[index].top = box.offsetTop;
            dragBoxArr[index].width = box.offsetWidth;
            dragBoxArr[index].height = box.offsetHeight;
            dragBoxArr[index].unit = 'px';

        };

        // 鼠标抬起时
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }

    //获取操作结果
    function heatMapListener(callback){
        var isOk = true;

        for (let i = 0; i < dragBoxArr.length; i++) {
            if (!dragBoxArr[i].link.title) {
                layer.msg('请选择热区'+ (i + 1) + '的链接地址');
                isOk = false;
                break;
            }
        }

        if (!isOk) return;

        dragBoxArr.forEach((item, index) => {
            var box = document.getElementById('box_' + index);
            item.width = parseFloat(box.offsetWidth / contentBoxWidth * 100).toFixed(2);
            item.height = parseFloat(box.offsetHeight / contentBoxHeight * 100).toFixed(2);
            item.left = parseFloat(box.offsetLeft / contentBoxWidth * 100).toFixed(2);
            item.top = parseFloat(box.offsetTop / contentBoxHeight * 100).toFixed(2);
            item.unit = '%';
        });

        imageData.heatMapData = dragBoxArr;

        if(typeof callback == 'function'){
            callback(imageData);
        }
    }

</script>